// 父亲需要定位 变速平移移动动画
function animate(obj, target, sec, callback) {
    //目标 步长 回调函数
    //callback = function(){} 调用的时候 callback()
    clearInterval(obj.move);
    obj.move = setInterval(() => {
        //步长值写到定时器里

        //把步长值改成整数 不要变成小数 Math.ceil 往上取整函数
        //加判断条件 正值往大的取，负值往小的取
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            //停止动画 本质是停止定时器
            clearInterval(obj.move)

            //回调函数写在定时器结束里面
            //增加判断条件，是否有callback参数传递进来
            if (callback) {
                callback(); //调用函数
                //console.log(2);
            }
        }
        //把每次 +1的值改了
        obj.style.left = obj.offsetLeft + step + 'px'
    }, sec);
    //console.log(1);
}

// 返回变速顶部
function animateY(obj, target, sec, callback) {
    //目标 步长 回调函数
    //callback = function(){} 调用的时候 callback()
    clearInterval(obj.move);
    obj.move = setInterval(() => {
        //步长值写到定时器里

        //把步长值改成整数 不要变成小数 Math.ceil 往上取整函数
        //加判断条件 正值往大的取，负值往小的取
        var step = (target - window.pageYOffset) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (window.pageYOffset == target) {
            //停止动画 本质是停止定时器
            clearInterval(obj.move)

            //回调函数写在定时器结束里面
            //增加判断条件，是否有callback参数传递进来
            /* if (callback) {
                callback(); //调用函数
                //console.log(2);
            } */
            callback && callback();
        }
        //把每次 +1的值改了
        //obj.style.left = window.pageYOffset + step + 'px'
        window.scroll(0, window.pageYOffset + step);
    }, sec);
    //console.log(1);
}

//父亲不需要定位
function nopoaition(obj, target, sec, callback) {
    //目标 步长 回调函数
    //callback = function(){} 调用的时候 callback()
    var translatex = target;
    obj.style.transform = 'translatex(' + translatex + 'px)';
    obj.style.transition = 'all ' + sec + 's ease-out';
    if (callback) {
        callback(); // 回调函数
    }
    console.log(1);
}

// 无点轮播图
function transformAnimate(obj, basewidth) {
    //目标 图片大小
    var index = 0;
    obj.timer = setInterval(() => {
        index++;
        var translateX = -index * basewidth;
        //实现过度动画 transition
        obj.style.transition = 'all 0.3s ease-out';
        obj.style.transform = 'translateX(' + translateX + 'px)';
        obj.style.width = 'calc(400rem / 50)';
    }, 2000);
    //等着过度完成之后 再去判断  监听过度完成的事件 transitionend
    obj.addEventListener('transitionend', function() {
        // 无缝滚动 原理：如果索引号等于3 说明走到最后一张 此时快速回到第一张，并且将索引号恢复为0
        if (index >= 4) {
            index = 0;
            //此时图片去掉过渡效果，然后移动
            obj.style.transition = 'none';
            var translateX = -index * basewidth;
            obj.style.transform = 'translateX(' + translateX + 'px)';
        } else if (index < 0) {
            index = 2;
            //此时图片去掉过渡效果，然后移动
            obj.style.transition = 'none';
            var translateX = -index * basewidth;
            obj.style.transform = 'translateX(' + translateX + 'px)';
        }
    })
}